<!--  -->
<template>
  <el-image-viewer v-if="modelValue" @close="closeback" :url-list="imgList" :hide-on-click-modal="hideOnClickModal" :initialIndex="initialIndex" @switch="switchback"/>
  <div v-if="modelValue" class="image-viewer-info">
    {{nowShowIndex + 1}} / {{total}}
  </div>
</template>

<script>
import { ref,watchEffect } from 'vue'
export default {
  name: '',
  props: {
    modelValue: {
      default: false,
      type: Boolean,
    },
    urlList:{
      default:()=>[],
      type: Array,
    },
    hideOnClickModal:{
      default: false,
      type: Boolean,
    },
    initialIndex:{
      default: 0,
      type: Number,
    }

  },
  emits:["update:modelValue","close","switch"],
  setup(props,{emit}) {
    const nowShowIndex = ref(0);
    watchEffect(()=>{
      nowShowIndex.value = props.initialIndex;
    });
    const total = ref(0);
    watchEffect(()=>{
      total.value = props.urlList.length
    });

    const imgList = ref([]);
    watchEffect(()=>{
      imgList.value = props.urlList;
    });
    return {
      closeback(){
        emit("update:modelValue",false)
        emit("close");
      },
      switchback(val){
        nowShowIndex.value = val;
        emit("switch",val);
      },
      nowShowIndex,
      total,
      imgList
    }
  }
};
</script>
<style scoped lang="scss">
.image-viewer-info{
  position: fixed;
  top: 24px;
  left: 24px;
  color: rgb(255, 255, 255);
  z-index: 3000;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>